<!-- 桥梁专家-病害诊断检索 -->
<template>
  <div class="app-container">
    <div class="disease-body">
      <el-card shadow="never" class="disease-left">
        <!-- 上边按钮 -->
        <div v-if="!isShow">
          <ButtonList @click-item="btnClick" @get-bridge="getBridgeType" :diseaseType="diseaseType"
            :bridgeType="bridgeType" :category="category" />
          <el-card shadow="never" class="disease-content">
            <template v-for="(item, index) in questionTypeList" :key="index">
              <question-item @update-data="changeQuestion" :bridgeType="item.bridgeType" :category="item.category"
                :diseaseType="item.type" :title="item.name" :index="index" />
            </template>
          </el-card>
        </div>
        <div class="disease-message" v-else>
          <Message :obj="messageObj" :params="messageParam" @done="reloadHis" @re-chat="getMessage" />
        </div>
        <!-- 下方对话框 -->
        <div class="disease-bottom">
          <ChatFrame v-model="done" :postDetail="message" @send="send" />
        </div>
      </el-card>
      <!-- 右侧历史记录 -->
      <div class="disease-right">
        <History ref="refChild" @update-message="handlerHistory" :category="category"
          :diseaseType="messageParam.diseaseType" :bridgeType="bridgeType" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useBridgeStore } from "@/store";
import { ref } from "vue";
import ButtonList from "../components/button-list.vue";
import History from "../components/history.vue";
import ChatFrame from "../components/chat-frame.vue";
import Message from "../components/message.vue";
import QuestionItem from "../components/question-item.vue";
import { DiseaseTypeVO } from "@/api/ai/disease-type/types";

defineOptions({
  name: "Disease",
  inheritAttrs: false,
});
const category = ref("2");
// 聊天是否完成
const done = ref(false);
// 这里类似vuex
const bridgeStore = useBridgeStore();
// 导航选中的桥梁类型
const bridgeType = computed(() => bridgeStore.bridgeType);
// 是否显示聊天窗口
const isShow = ref(false);
// 按钮触发事件
const diseaseType = ref("");
// 当前页面传给页面底部对话框的参数
const message = ref("");
// 历史记录传过来的messageId和messageTitle接收并传到message组件
const messageObj = ref({});
// 问题分类
const questionTypeList = ref<DiseaseTypeVO[]>([]);
// 获取子组件的引用
const refChild = ref(null);
// 聊天记录保存参数
const messageParam = reactive({
  bridgeType: bridgeStore.bridgeType,
  category: category,
  diseaseType: diseaseType.value,
});

// 上部分按钮点击
function btnClick(value: DiseaseTypeVO) {
  diseaseType.value = value.type;
  questionTypeList.value = value?.children || [];
}
// 顶部下拉框数据接收
function getBridgeType(value: string) {
  bridgeStore.bridgeType = value;
}

// 接消息对话组件传过来的问题描述并赋值到页面底部的对话框
function changeQuestion(message: string, params: any) {
  messageParam.bridgeType = params.bridgeType;
  messageParam.category = params.category;
  messageParam.diseaseType = params.diseaseType;
  getMessage(message);
}

// 接问题模块传过来的问题描述并赋值到页面底部的对话框
function getMessage(x) {
  message.value = x;
}
// 历史记录点击，和返回事件
function handlerHistory(data, y) {
  // 问答被终止
  done.value = false;
  if (data) {
    messageObj.value = {
      messageTitle: data.remark + "&",
      messageId: data.id,
    };
    messageParam.diseaseType = data.diseaseType;
    // 如果x有值则打开对话框
    isShow.value = true;
  } else {
    // 点击返回
    messageParam.diseaseType = "";
    message.value = "";
    isShow.value = false;
  }
}

// 点击发送按钮
function send(value: string) {
  message.value = value;
  messageObj.value = {
    messageTitle: value,
  };
  // 是否显示对话页面
  isShow.value = true;
}
// 调用历史记录列表刷新列表
function reloadHis() {
  done.value = false;
  refChild.value.getData();
}
</script>

<style lang="scss" scoped>
.disease-body {
  display: flex;

  .disease-left {
    flex: 1;
    height: 100%;
    border: none;
    background-color: transparent;
    padding: 0 120px 0 120px;

    .disease-content {
      width: 100%;
      height: calc(var(--body-height) - 310px);
      padding: 0 45px 20px;
      overflow-y: auto;

      .disease-item {
        margin-top: 22px;

        .disease-title {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: $main-text;
          margin-bottom: 8px;

          img {
            width: 32px;
            height: 38px;
          }
        }

        .item-sonList {
          display: flex;
          justify-content: space-between;

          .item-son {
            position: relative;
            width: 240px;
            height: 104px;
            background: rgba(72, 128, 225, 0.3);
            border-radius: 12px 12px 12px 12px;
            padding: 15px 10px;
            cursor: pointer;

            .item-son-title {
              font-size: 14px;
              color: $main-text;
              margin-bottom: 8px;
            }

            .item-son-text {
              font-size: 14px;
              color: $main-text;
            }

            .item-son-img {
              position: absolute;
              bottom: 17px;
              right: 19px;
              width: 16px;
              height: 15px;
            }
          }
        }
      }
    }

    .disease-bottom {
      width: 100%;
      height: 157px;
      margin-top: 20px;
    }

    .disease-message {
      height: calc(var(--body-height) - 202px);
    }
  }

  .disease-right {
    width: 224px;
    height: calc(var(--body-height) - 20px);
  }
}
</style>
